<template>
  <view>
    <page-meta>
      <navigation-bar front-color="#000000" background-color="#ffffff" :title="title" />
    </page-meta>
    <view class="content">
      <web-view :src="url"></web-view>
    </view>
  </view>
</template>

<script>
var wv
import { mapState } from 'vuex'
export default {
  data() {
    return {
      url: '',
      timer: null,
      forwardTimer: null,
      seconds: 0,
      title: '',
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
  },
  onLoad(query) {
    this.title = this.getCurrentPlayItem.title || ''
    this.$edu.api
      .getCourseSectionFileurl(this.getCurrentPlayItem.course_id, this.getCurrentPlayItem.id)
      .then((res) => {
        const { data } = res
        let links = data.fileurl_string
        let query = {
          file: `eduline_${links}_eduline`,
        }
        this.url = `/hybrid/html/pdf-view/index.html${this.$u.queryParams(query)}`
        this.onLearningTiming()
        this.onAddLearningTime()
      })
  },
  methods: {
    // 添加学习记录
    onAddLearning() {
      this.$edu.api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: this.seconds,
      })
    },
    // 定时添加学习记录/10s
    onAddLearningTime() {
      // 避免可能出现的倒计时重叠情况
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.onAddLearning()
      }, 10000)
    },
    // 学习计时器
    onLearningTiming() {
      // 避免可能出现的倒计时重叠情况
      clearInterval(this.forwardTimer)
      this.forwardTimer = setInterval(() => {
        this.seconds++
      }, 1000)
    },
  },
  onUnload() {
    clearInterval(this.timer)
    clearInterval(this.forwardTimer)
    this.onAddLearning()
  },
}
</script>

<style>
.content {
  width: 100%;
}
</style>
